<template>
    <div class="vote app_content">
        <div class="warp_body">
            <!-- 中间 -->
            <div class="carousel_box">
                <carousel-card></carousel-card>
            </div>

            <div class="tabCon mescroll mescroll-bar">
                <!-- 主活动 -->
                <section class="box">
                    <div class="topheader region">
                        <div class="biaoti_ranking">
                            <van-notice-bar color="#fff" background="none" scrollable :text="result.activity.simpleDescribe" />
                        </div>                        <div class="vote_info">
                            <div>
                                <span>{{ result.activity.projectNum }}</span>
                                <div>新农人</div>
                            </div>
                            <div>
                                <span>{{ result.activity.totalVoteNum }}</span>
                                <div>总票数</div>
                            </div>
                            <div>
                                <span>{{ result.activity.totalViewNum }}</span>
                                <div>浏览量</div>
                            </div>
                        </div>
                        <p
                            class="titme_box flex_y_center"
                            style="color: rgb(52, 52, 52);"
                            v-if="endTime > 0"
                        >
                            <i
                                class="Ticonfont iconH5_shouye_huodongxinxi_shijian"
                                style="color: rgb(0, 0, 0);"
                            ></i
                            >结束倒计时
                            <van-count-down :time="endTime" format="DD 天 HH 时 mm 分 ss 秒" />
                        </p>
                        <p v-else class="titme_box flex_y_center" style="color: rgb(52, 52, 52)">
                            活动结束
                        </p>
                        <div class="icon_rb"></div>
                    </div>
                </section>

                <div class="ranking_content" style="padding: 0rem 0.24rem; box-sizing: border-box; position: relative;">
                    <div class="tit"><ul class="flex_y_center flex_between"><li>排名</li> <li>新农人</li> <li>投票数</li></ul></div>
                    <div class="rank_box">
                        <ul class="rank_xia">

                            <li
                                v-for="(item, index) in result.list"
                                :key="item.subjectId"
                                @click="handleToDetail(item.subjectId)"
                            ><div class="rank_xia_con">
                                <div class="rank_num flex_grow_0">
                                    <img v-if="index === 0" src="~@/assets/img/top-one.png">
                                    <img v-else-if="index === 1" src="~@/assets/img/top-two.png">
                                    <img v-else-if="index === 2" src="~@/assets/img/top-three.png">
                                    <span v-else>{{ index + 1 }}</span>
                                </div>
                                <div class="rank_xia_img flex_grow_0"><img :src="item.subjectImgLink"></div> <div class="xia_player_name flex_grow_1"><b>{{item.subjectNo}}号</b> <p class="playername">
                                {{item.subjectName}}:{{ item.subjectSummay }}</p></div> <div class="xia_vote flex_grow_0"><span>{{ item.voteNumber }}</span></div></div></li>
                        </ul>
                        <div class="icon_rb"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="footer_body">
            <footer-nav></footer-nav>
        </div>
    </div>
</template>

<script setup>
import dayjs from "dayjs";

const { useHome } = $globalStore;
const router = useRouter();
// 请求结果
const result = reactive({
    activity: {},
    list: [],
});

// 获取
const getActivity = async () => {
    const res = await useHome.getActivity();
    if(res.success) {
        result.activity = res.body;
    }
}
getActivity();

const endTime = computed(function () {
    const { endTime } = result.activity;
    if (!endTime) {
        return null;
    }
    const end = dayjs(endTime).valueOf();
    return end - dayjs().valueOf();
});

const getListSubject = async () => {
    const res = await useHome.getListSubject({ type: 1 });
    if(res.success) {
        result.list = res.body;
    }
}
getListSubject();

const handleToDetail = (id) => {
    router.push({
        name: "Details",
        query: { id },
    });
}
</script>

<style lang="less" scoped>
.vote {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;

    .warp_body {
        .carousel_box {
            // height: 150px;
            width: 100%;
            padding-bottom: 10px;
        }
    }

    .boutique_box {
        .boutique_body {
            padding: 0px 0px 10px 0px;
        }
    }

    //.recommend_box {
    //    .recommend_body {
    //        width: 100%;
    //    }
    //}
}
.tit {
    background: -webkit-linear-gradient(left, rgb(4, 187, 224), rgb(33, 236, 179));
}
.biaoti_ranking .van-notice-bar {
    font-size: 0.36rem;
}
.rank_num{
    font-size: 0.4rem;
}
</style>
